<template>
	<view>
		<view v-if="locationDeny" class="d-flex justify-content-between align-items-center text-color-assist location-deny">
			<view class="text-color-assist">开启小程序「模糊定位服务」，获取所在城市</view>
			<view class="text-color-primary text-underline" @tap="openSetting">去开启</view>
		</view>
		<view v-else-if="selectCity" class="d-flex justify-content-between align-items-center text-color-assist location-deny">
			<view class="text-color-assist">当前选择城市：{{selectCity}}</view>
			<view class="text-color-primary text-underline" @tap="citySelectChange = true">切换城市</view>
		</view>
		<view v-else-if="currentCity" class="d-flex justify-content-between align-items-center text-color-assist location-deny">
			<view class="text-color-assist">当前定位城市：{{currentCity.label}}</view>
			<view class="text-color-primary text-underline" @tap="citySelectChange = true">切换城市</view>
		</view>
		
		<city-select ref="citys" v-model="citySelectChange" @city-change="cityChange"></city-select>
	</view>
</template>

<script>
	import {mapState, mapMutations } from 'vuex'
	import citySelect from '@/components/city-select/city-select.vue';
	export default {
		components: {citySelect},
		props: {
			currentCity:{
				type:Object,
				default:{label:'',value:''}
			}
		},
		computed:{
			...mapState(['scene']),
		},
		data() {
			return {
				locationDeny:false,
				citySelectChange:false,
				selectCity:''
			}
		},
		methods: {
			...mapMutations(['setCurrentCity']),
			openSetting() {
				let that = this;
				this.$f.openSetting().then(res=>{
					if(res['authSetting']['scope.userFuzzyLocation']) {
						this.locationDeny = false;
						this.getFuzzyLocation();
					}
				})
			},
			getFuzzyLocation() {
				this.$f.getLocation().then(res=>{
					let currentCity = this.$refs.citys.getCurrentCity(res.latitude,res.longitude);
					this.setCurrentCity(currentCity);
					this.$emit('over')
				}).catch(res=>{
					this.locationDeny = true;
				})
			},
			cityChange(e) {
				this.selectCity   = e.city;
				this.$emit('change', e.cityValue)
			},
		}
	}
</script>

<style>
.location-deny {
	padding: 0 20rpx 20rpx 20rpx;
}
</style>
